<template>
    <div class="login">
        <div class="left-side fl">
            <div class="login-module">
                <div class="hy-font">欢迎</div>
                <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top">
                    <div class="login-font mt30">账号</div>
                    <ElFormItem label="" prop="username">
                        <ElInput v-model="ruleForm.username" placeholder=""></ElInput>
                    </ElFormItem>
                    <div class="login-font">密码</div>
                    <ElFormItem label="" prop="password">
                        <ElInput v-model="ruleForm.password" type="password" autocomplete="off"></ElInput>
                    </ElFormItem>
                    <div class="clearfix">
                        <ElLink class="fl" :underline="false">忘记密码</ElLink>
                        <ElLink class="fr" :underline="false" @click="register">注册运营</ElLink>
                    </div>
                </ElForm>
                <div class="mt20">
                    <ElButton @click="_login" class="login-button" size="large">登录</ElButton>
                </div>
            </div>
        </div>
        <div class="right-side fr clearfix">
            <img class="right-side-img" src="../../assets/image/租户.png" alt="" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { setCookie, deleteCookie, debounce } from '@/utils/utils';
import { userLogin, getTenantStyleCustomization } from '@/api/api.query.util';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { initTheme, getTenantStyle } from '../Home/menuConfig';

const router = useRouter();
const ruleForm = reactive({
    username: '',
    password: '',
});
deleteCookie('SaaS_Token');
const rules = reactive({
    username: [
        {
            required: true,
            message: '账号不能为空',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'change',
        },
    ],
});

initTheme();

function _login(){
    debounce(login, 1000);
}

async function login() {
    if (!ruleForm.username) {
        ElMessage.warning('服务名称不能为空');
        return;
    }
    if (!ruleForm.password) {
        ElMessage.warning('密码不能为空');
        return;
    }
    const themeDta = await getTenantStyle();
        userLogin({
            method: 'post',
            data: {
                userName: ruleForm.username,
                password: ruleForm.password,
                accountType: 3,
            },
        }).then((res) => {
            if (res.code === 200) {
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                });
                if (!themeDta.result) {
                    router.push({ name: '/change-theme' });
                } else {
                    router.push({ name: '/home/service-management' });
                }
                setCookie('SaaS_Token', res.result);
            }
        });
}
// 注册
function register() {
    router.push({ path: '/register' });
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    .left-side {
        width: 50%;
        height: 100%;
        position: relative;
        .login-module {
            position: absolute;
            top: 27%;
            left: 27%;
            width: 46%;
            margin: 0 auto;
            .hy-font {
                font-size: 32px;
                color: #333333;
                line-height: 32px;
            }
            .login-font {
                font-size: 14px;
                line-height: 14px;
                display: inline-block;
                margin-bottom: 5px;
            }
            .login-input {
                height: 5%;
                width: 100%;
                display: block;
            }
            .login-button {
                background-color: var(--prmary-color);
                width: 100%;
                color: #ffffff;
            }
        }
    }
    .right-side {
        width: 50%;
        .right-side-img {
            width: 100%;
        }
    }
}
</style>
